﻿/* Global Full Reset as per http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
HTML,BODY,DIV,SPAN,APPLET,OBJECT,IFRAME,H1,H2,H3,H4,H5,H6,P,BLOCKQUOTE,PRE,ABBR,ACRONYM,ADDRESS,BIG,CITE,CODE,DEL,DFN,EM,FONT,IMG,INS,KBD,Q,S,SAMP,SMALL,STRIKE,STRONG,SUB,SUP,TT,VAR,DL,DT,DD,OL,UL,LI,FIELDSET,FORM,LABEL,LEGEND,TABLE,CAPTION,TBODY,TFOOT,THEAD,TR,TH,TD {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; }
A { margin:0; padding:0; font-size:100%; font-weight:inherit; font-style:inherit; vertical-align:baseline; background:transparent; }
BODY {line-height:1; color:black; background:white;}
OL, UL {list-style: none;}
TABLE {border-collapse:separate; border-spacing: 0;}
CAPTION, TH, TD {text-align:left; font-weight:normal;}
BLOCKQUOTE:before, BLOCKQUOTE:after, Q:before, Q:after {content: "";}
BLOCKQUOTE, Q {quotes: "" "";}
/* End Global Full Reset */

/* BODY {font-family:Arial,Tahoma,Helvetica,San Serif; font-size:62.5%; line-height:normal; text-align:center; background:#D7F0EE url('../img/bg.png') repeat fixed left bottom;} */
BODY {font-family:Arial,Tahoma,Helvetica,San Serif; font-size:62.5%; line-height:normal; text-align:center;}
BODY DIV {text-align:left;}
.text-large {font-size:75%;} .text-bigger {font-size:90%;} .text-biggest {font-size:100%;}

/* Global Typography */
H1, H2, H3, H4, H5, H6 {line-height:1.3em; font-weight:bold;}
H1 {color:#222; font-size:2.5em; padding:0.2em 0px;}
H2 {color:#000; font-size:1.8em; padding:0.2em 0px;}
H3 {color:#000; font-size:1.6em; padding:0.2em 0px;}
H4 {color:#000; font-size:1.5em; padding:0.2em 0px;}
H5 {color:#000; font-size:1.4em; padding:0.2em 0px;}
H6 {color:#000; font-size:1.3em; padding:0.2em 0px;}
P, DT, DD, BLOCKQUOTE {padding:0.5em 0px; color:#000; font-size:1.2em; line-height:1.5em;}
BLOCKQUOTE {margin:0.4em 30px; font-size:1.4em; line-height:1.6em;}
BLOCKQUOTE P, BLOCKQUOTE UL, BLOCKQUOTE OL {margin:0px; font-size:1em !important;}

/* UL's need a background */
UL, OL {font-size:1.2em; line-height:1.5em;}
UL {padding:0.5em 0px 0.5em 10px; list-style:none;}
OL {padding:0.5em 0px 0.5em 30px; list-style:decimal;}
LI UL, LI OL {padding-bottom:0em; font-size:1em;}
LI {padding:0.2em 0px; color:#000;}
UL > LI {padding-left:20px; background:url('../img/bullet-square-black.gif') 6px 0.8em no-repeat;}
OL > LI {padding-left:0px; background:none;}

/* Non image bullets 
LI {margin:0.2em 0px; color:#000;}
LI UL, LI OL {margin:0.5em 0em 0.5em 0px; font-size:1em;}
UL, OL {margin:0.5em 15px 0.5em 0px; padding-left:30px; font-size:1.2em; line-height:1.5em;}
UL {list-style:square outside none;}
OL {list-style:decimal outside none;}
*/

DL {padding:0px 5px 0.5em 14px;}
DT, DD {padding:0.2em 0px;}
DD {padding-left:20px;}
DT {font-weight:bold;}
DL P, DL UL, DL OL {font-size:1.0em !important;}
HR {height:1px; line-height:1px; color:#666366; background:#666366; border:none;}

/* Misc */
IMG {border:0px; vertical-align:bottom; font-size:1em; font-weight:bold;}
CODE {padding:0.5em; color:#000; font-size:1.2em; line-height:1.3em; font-family:Courier New, Serif;}
ADDRESS {font-size:1.2em; font-style:italic;}
STRONG {font-weight:bold;}
EM {font-style:italic;}
SUP, SUB {line-height:0; font-size:86%;}
SUB {vertical-align:-0.2em;}
SUP {vertical-align:0.6em;}

/* Inline Elements */
A {color:#08C; text-decoration:underline;}
A:visited {}
A:hover, A:focus {}
A:hover, A:active {outline:none;}

/* Table Elements */
TABLE {margin:0.5em 0px; border-collapse:collapse;}
TD, TH {color:#000; font-size:1.2em; border:1px #555 solid; vertical-align:middle;}
TH {font-weight:bold;}
CAPTION {font-size:1.2em; font-style:italic;}
TD, TH, CAPTION {padding:0.3em;}

/* Form Elements (non ie6 version) */
LABEL {font-weight:bold; padding-top:2px;}
INPUT, TEXTAREA, SELECT, LEGEND, LABEL, OPTION {color:#424242; font-family:Arial,Tahoma,Helvetica,San Serif;}
INPUT, TEXTAREA, SELECT, LEGEND, LABEL {font-size:1.1em;}
INPUT[type=text], TEXTAREA {padding:2px 0px 2px 3px;}
INPUT[type=radio], INPUT[type=checkbox], FIELDSET {border:none;}
SELECT, INPUT[type=text], TEXTAREA {border:1px #969696 solid;}
SELECT:focus, SELECT:hover, INPUT[type=text]:focus, INPUT[type=text]:hover, TEXTAREA:focus, TEXTAREA:hover {border:1px #000 solid;}
TEXTAREA {max-width:500px; max-height:500px; overflow:auto;}

/* Accessibility Elements */
#jumplinks, .visually-hidden {border:0 !important; clip:rect(0 0 0 0); height:1px !important; margin:-1px !important; overflow:hidden !important; padding:0 !important; position:absolute !important; width:1px !important;}
ACRONYM, ABBR {border:none;}
ACRONYM[title], ABBR[title] {cursor:help; border-bottom:1px dotted #AAA;}
ABBR {speak:normal;}
ACRONYM {speak:spell-out;}

/* JavaScript Warnings <p class="js-warning">JS required to use this feature.</p> */
.js-warning {display:block;}
SPAN.js-warning {display:inline;}
.js .js-warning {display: none; visibility: hidden;}

/* Hide for both screenreaders and browsers */
.hidden { display: none; visibility: hidden; }

/* Flash, Iframe special etc. */
.flash OBJECT, .flash EMBED, .media OBJECT, .media EMBED, .iframe IFRAME {float:left;}

/* ======= MODULES.CSS ======== */

/* Structural Elements */
#page-wrapper {width:984px; margin:0px auto; padding-top:50px;}
#page {}
#body {}

.content {}
.aside {}
		
DIV.top-bar {position:fixed; width:100%; z-index:1050; height:50px; background-color:#6e6f6f; background-image:-webkit-linear-gradient(top, #6E6F6F, #6E6F6F); box-shadow:0 1px 3px rgba(0, 0, 0, 0.5);}
DIV.top-bar > DIV.content {width:984px; height:50px; margin:0 auto;}
DIV.top-bar > DIV.content > DIV.user-info {float:right;}
DIV.top-bar > DIV.content > DIV.user-info > A {float:right; line-height:50px; font-size:16px; padding:0 10px; color:#ffffff;}
DIV.top-bar > DIV.content > DIV.user-info > A:hover {text-decoration:none;}
DIV.top-bar > DIV.content > DIV.user-info > SPAN {float:right; line-height:50px; color:#ffffff; font-size:16px; padding-right:20px;}

HEADER {float:left; width:984px; height:70px; background:#808080;}
HEADER DIV.brand {float:left; width:195px; height:70px; padding-left:10px;}
HEADER DIV.brand H1 {float:left; margin:0; padding:0; width:195px; height:70px; line-height:70px;}
HEADER DIV.brand H1 A {color:#ffffff;}
HEADER NAV.primary {float:left; padding:30px 0 0 0;}
HEADER NAV.primary > UL {float:left; margin:0; padding:0;}
HEADER NAV.primary > UL > LI {float:left; height:40px; margin:0 2px 0 0; padding:0; background:none;}
HEADER NAV.primary > UL > LI A {float:left; height:40px; line-height:40px; padding:0 20px; font-size:14px; text-decoration:none; background:#fff; border-top-right-radius: 10px;border-top-left-radius: 10px;}
HEADER NAV.primary > UL > LI A:hover {color:#ffffff; background:#CF2A27;}
HEADER DIV.global-search {float:right; width:250px; padding-top:30px;}
HEADER DIV.global-search INPUT[type=text] {width:158px}

DIV#body {float:left; width:984px;}
DIV#body > DIV.content {float:left; width:984px;}
DIV#body > DIV.content > DIV.banner {float:left; width:984px; margin:5px 0;}
DIV#body > DIV.content > DIV.banner DIV.banner-content {float:left; width:942px; margin:10px; border:1px #999 solid; padding:10px; background:#fff; border-radius:5px;}

DIV.breadcrumb {float:left; width:984px; height:30px; background:#CF2A27;}
DIV.breadcrumb > UL {float:left; margin:0; padding:7px 0 0 10px;}
DIV.breadcrumb > UL > LI {float:left; color:#fff; padding:0 4px; background:none;}
DIV.breadcrumb > UL > LI > A {color:#ffffff;}

DIV.breadcrumb.dashboard-menu > UL {padding-left:200px;}
DIV.breadcrumb.dashboard-menu > UL > LI {padding-right:24px;}
DIV.breadcrumb.dashboard-menu > UL > LI A {text-decoration:none;}
DIV.breadcrumb.dashboard-menu > UL > LI A:hover {color:#08C;}

DIV#body > DIV.content > H1.title {float:left; width:984px;}

SECTION.main {float:right; width:715px;}
SECTION.main > DIV.tabs {float:left; width:715px; position:relative; top:1px;}
SECTION.main > DIV.tabs > UL {float:left; width:700px; margin:0; padding:0 0 0 15px;}
SECTION.main > DIV.tabs > UL > LI {float:left; padding:0px; margin-right:-25px; background:none; position:relative;}
SECTION.main > DIV.tabs > UL > LI:first-child > A > SPAN {padding:0 0 0 15px;}
SECTION.main > DIV.tabs > UL > LI > A {float:left; height:32px; line-height:32px; padding:0 30px 0 0; color:#08c; background:transparent url('../img/arrow-tab.png') no-repeat scroll right top;}
SECTION.main > DIV.tabs > UL > LI > A > SPAN {float:left; height:32px; line-height:32px; padding:0 0 0 30px; background:transparent url('../img/arrow-tab.png') no-repeat scroll left top;}
SECTION.main > DIV.tabs > UL > LI > A.active {color:#fff; background:transparent url('../img/arrow-tab-active.png') no-repeat scroll right top;}
SECTION.main > DIV.tabs > UL > LI > A.active > SPAN {background:transparent url('../img/arrow-tab-active.png') no-repeat scroll left top;}

SECTION.main > DIV.tab-panel {float:left; width:695px; padding:10px; border:1px #999 solid; border-radius:5px; background:#fff; position:relative; z-index:100;}
SECTION.main > DIV.tab-panel DIV.tab-content {display:none; width:695px; min-height:300px;}
SECTION.main > DIV.tab-panel DIV.tab-content.active {display:block;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue {}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row {width:685px; padding-left:10px; height:48px; position:relative; z-index:1;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row > UL {margin:0; padding:8px 0;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row > UL > LI {float:left; background:none; margin:0; padding:2px 0 0 0; font-size:16px; position:relative;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row > UL > LI >SPAN {font-size:16px; cursor:pointer;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row > UL > LI > DIV.popup {display:none; position:absolute; left:0px; bottom:20px; z-index:99; padding:7px; border:1px #999 solid; border-radius:5px; background:#FFFFE0; box-shadow:0 1px 5px rgba(0,0,0,0.4);}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row > UL > LI:hover > DIV.popup {display:block;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row > UL > LI > DIV.popup TABLE {margin:0;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row > UL > LI > DIV.popup TD {white-space:nowrap; text-align:center; border:0;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row P {font-size:16px; color:#544D57;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row P > SPAN {display:inline-block; position:relative;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row P > SPAN > DIV {position:absolute; left:0; bottom:28px; border:1px #999 solid; border-radius:5px; padding:5px;}
SECTION.main > DIV.tab-panel DIV.tab-content ARTICLE.dialogue > DIV.row A.play {position:absolute; z-index:1; right:10px; top:10px; font-size:12px;}

SECTION.main > DIV.my-courses {float:left; width:715px; position:relative; z-index:1;}
SECTION.main > DIV.my-courses DIV.my-profile-image {width:70px; height:70px; padding:5px; border:1px #999 solid; background:#fff; position:absolute; top:9px; right:10px; z-index:100; border-radius:5px;}
SECTION.main > DIV.my-courses > DIV.my-profile {float:left; width:715px;}
SECTION.main > DIV.my-courses > DIV.my-profile > H2 {padding:15px 0;}
SECTION.main > DIV.my-courses > DIV.my-profile > UL.completion {float:left; width:715px; padding:0; margin:0; background:#fafafc; border-top:1px #999 solid; border-bottom:1px #999 solid;}
SECTION.main > DIV.my-courses > DIV.my-profile > UL.completion > LI {float:left; height:36px; padding:0 15px 0 30px; line-height:36px; background:transparent url('../img/completion-icon01.png') no-repeat scroll left center;}
SECTION.main > DIV.my-courses > DIV.my-profile P {float:left; padding:0.4em 0;}

SECTION.main > DIV.lessons-list {float:left; width:715px; padding:8px 0;}
SECTION.main > DIV.lessons-list > TABLE {width:715px; margin:0; background:#f5f5f5;}
SECTION.main > DIV.lessons-list > TABLE TD {border:0; height:30px;}
SECTION.main > DIV.lessons-list > TABLE TD.tier2 {width:110px; text-align:center;}
SECTION.main > DIV.lessons-list > TABLE TD.comment {width:50px;}
SECTION.main > DIV.lessons-list > TABLE TD.comment SPAN {padding-left:25px; background:transparent url('../img/comment-icon.png') no-repeat scroll left center; color:#999;}
SECTION.main > DIV.lessons-list > TABLE TR {border-bottom:1px #fff solid;}
SECTION.main > DIV.lessons-list > TABLE TR.alt {background-color:#eeeeee;}
SECTION.main > DIV.lessons-list > TABLE TR:hover {background:#feffcc;}
SECTION.main > DIV.lessons-list > TABLE TD A.level {padding-left:28px; color:#e10000; text-decoration:none; background:transparent url('../img/lesson-icon.png') no-repeat scroll left center;}
SECTION.main > DIV.lessons-list > TABLE TD A.lesson-link {color:#333; text-decoration:none;}
SECTION.main > DIV.lessons-list > TABLE TD SPAN.lesson-link {position:relative;}
SECTION.main > DIV.lessons-list > TABLE TD SPAN.lesson-link DIV.lesson-preview {display:none; position:absolute; z-index:100; left:0; top:25px; border:1px #999 solid; border-radius:5px; background:#FFFFE0; padding:10px; width:350px; box-shadow:0 1px 5px rgba(0, 0, 0, 0.4);}
SECTION.main > DIV.lessons-list > TABLE TD SPAN.lesson-link:hover DIV.lesson-preview {display:block;}
SECTION.main > DIV.lessons-list > TABLE TD SPAN.lesson-link DIV.lesson-preview > DIV {float:left; width:350px;}
SECTION.main > DIV.lessons-list > TABLE TD SPAN.lesson-link DIV.lesson-preview > DIV DIV.image {float:left; width:150px; height:100px;}
SECTION.main > DIV.lessons-list > TABLE TD SPAN.lesson-link DIV.lesson-preview > DIV DIV.text {float:left; width:180px; padding:0 10px;}
SECTION.main > DIV.lessons-list > TABLE TD SPAN.lesson-link DIV.lesson-preview > DIV DIV.text P {font-size:12px; color:#666; padding:0;}
SECTION.main > DIV.lessons-list > TABLE TD A.lesson-link:hover {text-decoration:underline;}

SECTION.main > DIV.comment {float:left; width:695px; padding:10px; background:#c0c0c0;}
SECTION.main > DIV.comment > DIV.conversations {float:left; width:695px; padding:5px 0;}
SECTION.main > DIV.comment > DIV.conversations H2 {float:left; width:150px; padding:10px 0;}
SECTION.main > DIV.comment > DIV.conversations > UL {float:left;}
SECTION.main > DIV.comment > DIV.conversations > UL > LI {float:left; background:none; padding:0 10px 0 0;}
SECTION.main > DIV.comment > DIV.conversations > UL > LI A {float:left; padding:5px; color:#fff; text-decoration:none; background:#959595;}
SECTION.main > DIV.comment > DIV.conversations > UL > LI A.active {color:#959595; background:#fff;}

SECTION.main > DIV.comment DIV.comment-list {float:left; width:695px;}
SECTION.main > DIV.comment DIV.comment-list > UL {float:left; width:695px; margin:0; padding:0;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI {float:left; width:675px; padding:10px; background:none;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI.alt {background-color:#f7f7f7;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI DIV.author {float:left; width:80px;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI DIV.author DIV.image {width:41px; height:41px; margin:0 0 0 20px;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI DIV.author SPAN, SECTION.main > DIV.comment DIV.comment-list > UL > LI DIV.author A {display:block; text-align:center;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI DIV.author A.name {color:#c60000; text-decoration:none; margin-top:5px;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI DIV.author A.name:hover {text-decoration:underline;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI DIV.text {float:left; width:575px; padding:0 0 0 20px;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI DIV.text A.relative-text {font-size:12px; text-decoration:none;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI DIV.text A.relative-text:hover {text-decoration:underline;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI DIV.text P {font-size:12px;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI.title {background:#000; padding:5px 10px;}
SECTION.main > DIV.comment DIV.comment-list > UL > LI.title SPAN {color:#fff; font-size:12px;}


A.all-coversations {float:left; margin:5px 0;}
A.all-coversations:hover {text-decoration:none;}

ASIDE.primary {float:left; width:252px;}
ASIDE.primary DIV.grid {float:left; width:250px; border:1px #999 solid; border-radius:5px; margin-bottom:10px;}
ASIDE.primary DIV.grid.media {padding-bottom:20px;}
ASIDE.primary DIV.grid.media FIGURE {margin:0; padding:10px;}
ASIDE.primary DIV.grid.media AUDIO {width:220px; height:30px; margin-left:15px; margin-bottom:5px;}
ASIDE.primary DIV.grid.media A {padding:0 0 0 15px; font-size:12px;}

ASIDE.primary DIV.grid > H3 {float:left; width:235px; padding-left:15px; color:#fff; background:#CF2A27; height:24px; line-height:24px;}
ASIDE.primary DIV.grid > DIV.lesson-list {float:left; width:250px;}
ASIDE.primary DIV.grid > DIV.lesson-list > UL {float:left; margin:0; padding:10px 0 10px 10px; width:240px;}
ASIDE.primary DIV.grid > DIV.lesson-list > UL > LI {float:left; width:205px; padding-left:30px; padding-bottom:0.4em; background:transparent url('../../../media/icon.jpg') no-repeat scroll left top;}

ASIDE.primary DIV.grid > DIV.lesson-info {float:left; width:230px; padding:10px;}
ASIDE.primary DIV.grid > DIV.lesson-info TD {border:0; color:#666; font-size:12px;}

ASIDE.primary DIV.grid > DIV.expired {float:left; width:200px; padding:10px; padding-left:40px; background:transparent url('../img/expired-icon.png') no-repeat scroll 10px 18px;}

ASIDE.primary DIV.grid > DIV.level {float:left; width:230px; padding:10px;}
ASIDE.primary DIV.grid > DIV.level SELECT {width:200px;}

ASIDE.primary DIV.grid > DIV.quick-links {float:left; width:230px; padding:10px;}
ASIDE.primary DIV.grid > DIV.quick-links > UL {float:left; width:230px; padding:0; margin:0;}
ASIDE.primary DIV.grid > DIV.quick-links > UL > LI {float:left; width:190px; padding:5px 0 5px 40px; background:transparent url('../img/quick-link-01.png') no-repeat scroll left top;}
ASIDE.primary DIV.grid > DIV.quick-links > UL > LI > A {color:#666; text-decoration:none;}
ASIDE.primary DIV.grid > DIV.quick-links > UL > LI > A:hover {text-decoration:underline;}

FOOTER {float:left; width:984px; background:#808080;}
FOOTER > NAV.footer-nav {float:left; padding:20px;}
FOOTER > NAV.footer-nav > UL {float:left; margin:0; padding:0;}
FOOTER > NAV.footer-nav > UL > LI {float:left; background:none;}
FOOTER > NAV.footer-nav > UL > LI > A {float:left; color:#fff;}
DIV.social-link {float:right; padding-top:20px; padding-right:10px;}

/* ADD JIYE */
.tab2 {font-family:"メイリオ";}


/* Branding /*
DIV.brand { ... }
DIV.brand H2 { ... }
DIV.brand H2 A { ... }

/* Navigation /*
DIV.navigation { ... }
DIV.navigation UL { ... }
DIV.navigation UL LI { ... }
DIV.navigation UL LI.active { ... }

*/